﻿<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
             xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
             xmlns:local="clr-namespace:MainGameModule.Views"
             xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:MainGameModule_ViewModels="clr-namespace:MainGameModule.ViewModels"
             xmlns:Microsoft_Practices_Composite_Events="clr-namespace:Microsoft.Practices.Composite.Events;assembly=Microsoft.Practices.Composite"
             x:Class="MainGameModule.Views.PopUpTrashView"
             mc:Ignorable="d"
             Width="797"
             Height="604"
             Loaded="UserControl_Loaded">
    <UserControl.Resources>
        <ResourceDictionary>
            <MainGameModule_ViewModels:BinViewModel x:Key="BinViewModelDataSource"
                                                    d:IsDataSource="True" />

            <Microsoft_Practices_Composite_Events:EventAggregator x:Key="EventAggregatorDataSource"
                                                                  d:IsDataSource="True" />

            <ControlTemplate x:Key="TakeNoActionTemplate"
                             TargetType="Button">
                <Canvas Height="50"
                        Grid.Row="1"
                        Grid.Column="1"
                        Margin="0,0,19,0">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:1" />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                                                   Storyboard.TargetName="ellipse">
                                        <EasingDoubleKeyFrame KeyTime="0"
                                                              Value="1.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                                                   Storyboard.TargetName="ellipse">
                                        <EasingDoubleKeyFrame KeyTime="0"
                                                              Value="1.3" />
                                    </DoubleAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
                                                                  Storyboard.TargetName="textBlock">
                                        <EasingColorKeyFrame KeyTime="0"
                                                             Value="#FFB62B2B" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle Fill="#FF2E3D04"
                               Height="38"
                               Opacity="0.745"
                               RadiusY="7"
                               RadiusX="7"
                               Canvas.Top="7"
                               Width="252"
                               Canvas.Left="-34" />
                    <TextBlock x:Name="textBlock"
                               Foreground="#FFBCBCBC"
                               FontSize="17.333"
                               Height="27"
                               TextAlignment="Center"
                               TextWrapping="Wrap"
                               Text="Or ... take no action!?"
                               Width="199"
                               Canvas.Left="19"
                               Canvas.Top="13" />
                    <Ellipse x:Name="ellipse"
                             Height="50"
                             Canvas.Left="-26"
                             Stroke="#FF8E0B0B"
                             StrokeThickness="5"
                             Width="50"
                             Opacity="0.75"
                             RenderTransformOrigin="0.5,0.5">
                        <Ellipse.Fill>
                            <LinearGradientBrush EndPoint="0.601,0.789"
                                                 StartPoint="0.346,0.313">
                                <GradientStop Color="#FFF7F7F7"
                                              Offset="0.246" />
                                <GradientStop Color="White"
                                              Offset="0.62" />
                                <GradientStop Color="#FFB11F1F"
                                              Offset="0.264" />
                                <GradientStop Color="#FF810303"
                                              Offset="0.61" />
                            </LinearGradientBrush>
                        </Ellipse.Fill>
                        <Ellipse.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform />
                                <SkewTransform />
                                <RotateTransform />
                                <TranslateTransform />
                            </TransformGroup>
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </Canvas>
            </ControlTemplate>
            
            <DataTemplate x:Key="RubbishDataTemplate">
                <Grid>

                    <ToolTipService.ToolTip>
                        <ToolTip Width="300"
                                 x:Name="toolTip">
                            <ToolTip.Template>
                                <ControlTemplate TargetType="ToolTip">
                                    <Border CornerRadius="7"
                                            BorderBrush="Black"
                                            BorderThickness="1,1,4,4">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0.5,1"
                                                                 StartPoint="0.5,0">
                                                <GradientStop Color="#FF9FB89F"
                                                              Offset="0.128" />
                                                <GradientStop Color="#FF308330"
                                                              Offset="0.799" />
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Grid Margin="3">
                                            <Grid.RowDefinitions>
                                                <RowDefinition />
                                                <RowDefinition />
                                            </Grid.RowDefinitions>

                                            <ContentPresenter Margin="10"
                                                              Content="{TemplateBinding Content}" />
                                            <Line X2="10"
                                                  Grid.Row="1"
                                                  Stretch="Fill"
                                                  StrokeThickness="2"
                                                  StrokeDashCap="Round"
                                                  Stroke="Yellow"
                                                  Margin="10,0,10,10" />
                                        </Grid>
                                    </Border>
                                </ControlTemplate>
                            </ToolTip.Template>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image x:Name="toolTipImage"
                                       Width="60"
                                       Height="60"
                                       Source="{Binding Image}" />
                                <TextBlock Text="{Binding Description}"
                                           Margin="10,0,0,0"
                                           TextWrapping="Wrap"
                                           Grid.Column="1" />
                            </Grid>
                        </ToolTip>
                    </ToolTipService.ToolTip>
                    <Image Width="30"
                           Height="30"
                           Stretch="Fill"
                           Margin="0"
                           Source="{Binding Image}" />

                </Grid>
            </DataTemplate>

            <DataTemplate x:Key="BasketDataTemplate">

                <Grid Margin="0"
                      x:Name="BinGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="BinVisualStateGroup">
                            <VisualStateGroup.Transitions>
                                <VisualTransition />
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="ColsedState" />
                            <VisualState x:Name="OpenState">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     To="0"
                                                     Storyboard.TargetProperty="(UIElement.Opacity)"
                                                     Storyboard.TargetName="CloseImg"
                                                     d:IsOptimized="True" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                   Storyboard.TargetName="CloseImg">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimation Duration="0"
                                                     To="1"
                                                     Storyboard.TargetProperty="(UIElement.Opacity)"
                                                     Storyboard.TargetName="OpenImg"
                                                     d:IsOptimized="True" />
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                                   Storyboard.TargetName="OpenImg">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <VisualStateManager.CustomVisualStateManager>
                        <ei:ExtendedVisualStateManager />
                    </VisualStateManager.CustomVisualStateManager>
                    <Image Width="85"
                           Height="120"
                           x:Name="OpenImg"
                           Source="images/objects/BinOpen.png"
                           Opacity="0"
                           Visibility="Collapsed">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseLeave">
                                <ei:GoToStateAction StateName="ColsedState" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>
                    <Image Width="85"
                           Height="120"
                           x:Name="CloseImg"
                           Source="images/objects/BinClosed.png">
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="MouseEnter">
                                <ei:GoToStateAction StateName="OpenState" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </Image>

                    <TextBlock Text="{Binding Name}"
                               Width="85"
                               Grid.Row="1"
                               TextAlignment="Center"
                               FontFamily="Segoa UI"
                               Foreground="White"
                               FontWeight="Bold"
                               TextWrapping="Wrap" />
                </Grid>
            </DataTemplate>
            <ec:IsArrangedToScaleConverter x:Key="IsArrangedToScaleConverter" />

            <Storyboard x:Name="ShowWriteAnswerAndCloseStoryboard">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                               Storyboard.TargetName="RightAnswerFeedbackGrid">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.1">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimation Duration="0:0:0.5"
                                 To="0.995"
                                 Storyboard.TargetProperty="(UIElement.Opacity)"
                                 Storyboard.TargetName="RightAnswerFeedbackGrid"
                                 d:IsOptimized="True">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
            <Storyboard x:Name="TryAgainStoryboard">
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                               Storyboard.TargetName="WrongAnswerFeedbackGrid">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0.2">
                        <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                               Storyboard.TargetName="WrongAnswerFeedbackGrid">
                    <EasingDoubleKeyFrame KeyTime="0:0:0.2"
                                          Value="0">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <CubicEase EasingMode="EaseOut" />
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                    <EasingDoubleKeyFrame KeyTime="0:0:1"
                                          Value="1">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <CubicEase EasingMode="EaseOut" />
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="BinsStoryboard">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(PathListBox.LayoutPaths)[0].(LayoutPath.Start)"
                                               Storyboard.TargetName="pathListBox">
                    <EasingDoubleKeyFrame KeyTime="0"
                                          Value="0" />
                    <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                          Value="0.1">
                        <EasingDoubleKeyFrame.EasingFunction>
                            <BounceEase EasingMode="EaseOut"
                                        Bounces="1" />
                        </EasingDoubleKeyFrame.EasingFunction>
                    </EasingDoubleKeyFrame>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Name="BinsEndStoryboard">
                <DoubleAnimation Duration="0:0:0.5"
                                 To="0"
                                 Storyboard.TargetProperty="(PathListBox.LayoutPaths)[0].(LayoutPath.Span)"
                                 Storyboard.TargetName="pathListBox"
                                 d:IsOptimized="True">
                    <DoubleAnimation.EasingFunction>
                        <QuadraticEase EasingMode="EaseOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>

            <Style x:Key="BinsListBoxItemStyle"
                   TargetType="ec:PathListBoxItem">
                <Setter Property="HorizontalContentAlignment"
                        Value="Left" />
                <Setter Property="VerticalContentAlignment"
                        Value="Top" />
                <Setter Property="Background"
                        Value="Transparent" />
                <Setter Property="BorderThickness"
                        Value="1" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ec:PathListBoxItem">
                            <Grid Background="{TemplateBinding Background}"
                                  RenderTransformOrigin="0.5,0.5">
                                <Grid.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleY="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}"
                                                        ScaleX="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}" />
                                        <SkewTransform />
                                        <RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}" />
                                        <TranslateTransform />
                                    </TransformGroup>
                                </Grid.RenderTransform>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="MouseOver">                                           
                                        </VisualState>
                                        <VisualState x:Name="Disabled">                                           
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected" />
                                        <VisualState x:Name="Selected">                                           
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">                                            
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Ellipse x:Name="fillColor"
                                         Fill="#FFE7DE7D"
                                         IsHitTestVisible="False"
                                         Opacity="0"
                                         Margin="-30,-10" />
                                <Ellipse x:Name="fillColor2"
                                         Fill="#FFE9E186"
                                         IsHitTestVisible="False"
                                         Opacity="0"
                                         Margin="-30,-10" />
                                <ContentPresenter x:Name="contentPresenter"
                                                  ContentTemplate="{TemplateBinding ContentTemplate}"
                                                  Content="{TemplateBinding Content}"
                                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                  Margin="{TemplateBinding Padding}" />
                                <Ellipse x:Name="FocusVisualElement"
                                         Stroke="#FFCEC027"
                                         StrokeThickness="1"
                                         Margin="-30,-10"
                                         Visibility="Collapsed" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/YourWorld.Common;component/Styles/CommonResourcesDictionary.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </UserControl.Resources>
    <Grid Margin="0"
          x:Name="LayoutRoot"
          Background="Transparent"
          Height="604">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="TrashVisualStateGroup">
                <VisualState x:Name="NormalState" />
                <VisualState x:Name="InfoState">
                    <Storyboard>
                        <DoubleAnimation Duration="0"
                                         To="1"
                                         Storyboard.TargetProperty="(UIElement.Opacity)"
                                         Storyboard.TargetName="grid"
                                         d:IsOptimized="True" />
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                                       Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid Margin="0,75,0,61"
              Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
           <Path x:Name="BackgroundRectangle"
              Grid.RowSpan="4"
			  Grid.ColumnSpan="2"
              Data="M187.2383,141.7393C187.2383,141.7393,176.3913,144.7943,172.5713,149.0723C164.2383,158.4063,166.5713,209.7393,165.2383,221.7393C163.9053,233.7393,163.9053,364.4073,165.2383,397.0733C166.5713,429.7393,165.2383,441.7393,167.9053,452.4053C170.5713,463.0733,178.5713,462.4053,187.2383,465.7393C195.9053,469.0733,317.9053,475.0733,335.2383,475.0733C352.5713,475.0733,497.2383,476.4073,523.9053,475.0733C550.5723,473.7393,617.2393,476.4053,630.5723,469.7393C643.9053,463.0733,651.2383,452.4053,651.2383,435.7393C651.2383,419.0733,652.5713,301.0723,651.2383,249.0723C649.9053,197.0723,651.8313,159.3863,645.9053,150.4063C641.9333,144.3863,629.2383,143.7393,617.9053,141.7393C606.5723,139.7393,419.9053,137.7393,381.2383,138.4063C342.5713,139.0723,187.2383,141.7393,187.2383,141.7393z"
              Stretch="Fill">
            <Path.Effect>
                <DropShadowEffect Opacity="0.5" />
            </Path.Effect>
            <Path.Fill>
                <RadialGradientBrush RadiusX="0.8">
                    <GradientStop Color="#FFD1E778" />
                    <GradientStop Color="#FF4A6305"
                                  Offset="1" />
                </RadialGradientBrush>
            </Path.Fill>
        </Path>

            <TextBlock Text="Recycle"
                       Grid.ColumnSpan="2"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Foreground="Yellow"
                       FontWeight="Bold"
                       FontSize="30"
                       FontFamily="Segoe UI">
                	<TextBlock.Effect>
                		<BlurEffect />
                	</TextBlock.Effect>
            </TextBlock>
            <TextBlock Text="Recycle"
                       Grid.ColumnSpan="2"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Foreground="White"
                       FontSize="29"
                       FontFamily="Segoe UI"
                       Margin="0,1,0,0" />

            <Button x:Name="NoActionButton"
                    Width="226"
                    Height="50"
                    Grid.Row="3"
                    Grid.Column="0"
                    IsTabStop="False"
                    FontSize="16"
                    Command="{Binding TakeNoActionCommand}"
                    Template="{StaticResource TakeNoActionTemplate}"
                    HorizontalAlignment="Center"
                    d:LayoutOverrides="GridBox"
                    Margin="38,0,0,18" />
            <ec:PathListBox x:Name="pathListBox"
                            Margin="-128,-9,0,0"
                            Grid.Row="1"
                            Grid.RowSpan="2"
                            HorizontalAlignment="Left"
                            Height="29"
                            VerticalAlignment="Top"
                            Width="43"
                            SelectedItem="{Binding SelectedBin, Mode=TwoWay}"
                            ItemTemplate="{StaticResource BasketDataTemplate}"
                            ItemsSource="{Binding BinItems}"
                            ItemContainerStyle="{StaticResource BinsListBoxItemStyle}">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="SelectionChanged">
                        <ei:GoToStateAction StateName="InfoState" />
                    </i:EventTrigger>
                </i:Interaction.Triggers>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath SourceElement="{Binding ElementName=pathLeft}"
                                   Padding="25" />
                    <ec:LayoutPath SourceElement="{Binding ElementName=pathRight}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>


            <StackPanel Grid.Row="3"
                        Grid.Column="1"
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        HorizontalAlignment="Center"
                        Margin="0,0,0,7">

                <TextBlock Text="Drag the rubbish to the right bin. Select a bin to see its content."
                           Margin="5,0"
						   FontFamily="Segoa UI"
						   Foreground="White"
                           VerticalAlignment="Bottom" />
            </StackPanel>
            <Path x:Name="pathLeft"
                  Grid.Column="1"
                  Data="M862.83087,333.9238 L486.3273,333.979"
                  Margin="63,0,66.496,90.5"
                  Grid.Row="2"
                  Stretch="Fill"
                  Stroke="#FFAB1919"
                  StrokeThickness="0"
                  UseLayoutRounding="False"
                  Height="2.093"
                  VerticalAlignment="Bottom" />
            <Path x:Name="pathRight"
                  Grid.Column="1"
                  Data="M33.019829,214.04878 L388.13422,213.63733"
                  Margin="66.84,11.5,83.5,0"
                  Grid.Row="2"
                  Stretch="Fill"
                  Stroke="#FFAB1919"
                  StrokeThickness="0"
                  UseLayoutRounding="False"
                  Height="2.08"
                  VerticalAlignment="Top" />

            <Border Grid.Column="0"
                    Grid.Row="1"
                    CornerRadius="25"
                    Margin="22,10"
                    Grid.RowSpan="2"
                    Opacity="0.3"
                    VerticalAlignment="Stretch"
                    Width="220">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="Black"
                                      Offset="0" />
                        <GradientStop Color="White"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Border.Background>
            </Border>
            <ScrollViewer Grid.Row="2"
                          Width="210"
                          BorderThickness="0"
                          Style="{StaticResource ListBoxScrollViewerStyle}"
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Margin="35,25">
                <TextBlock x:Name="GarbageDescription"
                           TextWrapping="Wrap"
                           Text="{Binding Rubbish.Description}"
                           Foreground="Gainsboro"
                           FontSize="12"
                           Margin="2,2,2,5"
                           VerticalAlignment="Top" />
            </ScrollViewer>
            <Image x:Name="rubbish"
                   Grid.Row="1"
                   Grid.Column="0"
                   Source="{Binding Rubbish.Image}"
                   Stretch="Uniform"
                   HorizontalAlignment="Center"
                   Width="100"
                   Margin="5"
                   Height="100"
                   VerticalAlignment="Center">
                <ToolTipService.ToolTip>
                    <ToolTip x:Name="toolTip">
                        <ToolTip.Template>
                            <ControlTemplate TargetType="ToolTip">
                                <Grid>
                                    <Path Data="M-1,-14 C-1,-27.807117 11.192882,0 25,0 L170,0 C183.80711,0 195,5.1928887 195,19.000011 L195,32 C195,45.807117 183.80711,45 170,45 L25,45 C11.192882,45 0,36.807117 0,23.000017 z"
                                          Fill="#FF4F5638"
                                          Stretch="Fill"
                                          UseLayoutRounding="False"
                                          Opacity="0.8" />
                                    <TextBlock Margin="3,25,3,5"
                                               Text="Drag me to the right bin."
                                               FontFamily="Segoa UI"
                                               Foreground="White" />
                                </Grid>
                            </ControlTemplate>
                        </ToolTip.Template>
                    </ToolTip>
                </ToolTipService.ToolTip>
                <i:Interaction.Behaviors>
                    <ei:MouseDragElementBehavior x:Name="beh"                                                  
                                                 DragFinished="beh_DragFinished"
                                                 ConstrainToParentBounds="True" />
                </i:Interaction.Behaviors>
            </Image>
        </Grid>

        <Grid x:Name="grid"
              Margin="317,98,80,50"
              Width="398"
              Height="305"
              Opacity="0"
              Visibility="Collapsed">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Rectangle Grid.RowSpan="2"
                       RadiusX="15"
                       RadiusY="15"
                       Stroke="#FFBABABA"
                       Opacity="0.9"
                       StrokeThickness="2">
                <Rectangle.Fill>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="#FF364707"
                                      Offset="0" />
                        <GradientStop Color="#FFA1BA59"
                                      Offset="0.178" />
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>

            <Path HorizontalAlignment="Right"
                  MouseLeftButtonDown="Path_MouseLeftButtonDown"
                  Margin="10"
                  Data="M0,6 C0,2.6862915 2.6862915,0 6,0 L11,10.625 L16,0 C19.313709,0 22,2.6862915 22,6 L12.125,11.625 L22,16 C22,19.313709 19.313709,22 16,22 L10.875,12.5 L6,22 C2.6862915,22 0,19.313709 0,16 L9.875,11.5 z"
                  Fill="Red"
                  Height="22"
                  Stretch="Fill"
                  VerticalAlignment="Top"
                  Width="22"
                  d:LayoutOverrides="Width, Height"
                  UseLayoutRounding="False">
                <i:Interaction.Triggers>
                    <i:EventTrigger EventName="MouseLeftButtonDown">
                        <ei:GoToStateAction StateName="NormalState" />
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseLeave">
                        <ei:ChangePropertyAction PropertyName="Fill"
                                                 Duration="0:0:0.5">
                            <ei:ChangePropertyAction.Ease>
                                <CubicEase EasingMode="EaseOut" />
                            </ei:ChangePropertyAction.Ease>
                            <ei:ChangePropertyAction.Value>
                                <SolidColorBrush Color="#FFFF2900" />
                            </ei:ChangePropertyAction.Value>
                        </ei:ChangePropertyAction>
                    </i:EventTrigger>
                    <i:EventTrigger EventName="MouseEnter">
                        <ei:ChangePropertyAction PropertyName="Fill"
                                                 Duration="0:0:0.5">
                            <ei:ChangePropertyAction.Value>
                                <SolidColorBrush Color="#FF2140C0" />
                            </ei:ChangePropertyAction.Value>
                            <ei:ChangePropertyAction.Ease>
                                <ExponentialEase EasingMode="EaseOut" />
                            </ei:ChangePropertyAction.Ease>
                        </ei:ChangePropertyAction>
                    </i:EventTrigger>
                </i:Interaction.Triggers>
            </Path>

            <TextBlock Text="Browse bin's content"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       FontFamily="Segoa UI"
                       Foreground="White"
                       FontWeight="Bold" />

            <ScrollViewer Grid.Row="1"
                          BorderThickness="0"
                          Style="{StaticResource ListBoxScrollViewerStyle}"
                          ScrollViewer.VerticalScrollBarVisibility="Visible"
                          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Margin="2">
                <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                         ScrollViewer.VerticalScrollBarVisibility="Hidden"
                         ItemsSource="{Binding SelectedBin.ContentItems}"
                         Background="{x:Null}"
                         BorderBrush="{x:Null}"
                         Style="{StaticResource ListBoxNoSelectionStyle}"
                         ItemContainerStyle="{StaticResource ListBoxNoSelectionItemStyle}">
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal"
                                        Width="370">
                                <Image Source="{Binding Image}"
                                       Width="50"
                                       Height="50"
                                       Stretch="Uniform"
                                       Margin="2" />
                                <TextBlock Text="{Binding Description}"
                                           Width="315"
                                           TextWrapping="Wrap"
                                           Margin="5" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>

            </ScrollViewer>
        </Grid>

        <StackPanel x:Name="WrongAnswerFeedbackGrid"
                    Margin="0,93,191,0"
                    Opacity="0"
                    Width="172"
                    Height="81"
                    Orientation="Horizontal"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Right"
                    Visibility="Collapsed">
            <Image Margin="5"
                   Source="images/no.png"
                   Stretch="Fill"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Width="70"
                   Height="60" />
            <TextBlock Margin="5"
                       TextWrapping="Wrap"
                       VerticalAlignment="Center"
                       Text="Try Again"
                       ToolTipService.ToolTip="Select another bin"
                       FontSize="14.667"
                       FontWeight="Bold"
                       d:LayoutOverrides="Width"
                       HorizontalAlignment="Center"
                       Foreground="White" />
        </StackPanel>
        <StackPanel x:Name="RightAnswerFeedbackGrid"
                    Orientation="Horizontal"
                    Width="202"
                    Height="81"
                    HorizontalAlignment="Right"
                    Margin="0,93,161,0"
                    VerticalAlignment="Top"
                    d:LayoutOverrides="Width, Height"
                    Opacity="0"
                    Visibility="Collapsed">
            <Image Margin="5"
                   Source="images/ok.png"
                   Stretch="Fill"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Width="100"
                   Height="60" />
            <TextBlock Margin="5"
                       TextWrapping="Wrap"
                       VerticalAlignment="Center"
                       Text="Well Done"
                       ToolTipService.ToolTip="Select another bin"
                       FontSize="14.667"
                       FontWeight="Bold"
                       d:LayoutOverrides="Width"
                       HorizontalAlignment="Center"
                       Foreground="White" />
        </StackPanel>


    </Grid>
</UserControl>
